<!--
 * @Author: your name
 * @Date: 2022-01-15 07:53:20
 * @LastEditTime: 2022-01-16 08:26:49
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \my-site\src\components\messageArea\components\dataList.vue
-->
<template>
  <div class="dataList-container" ref="dataList">
      <div class="dataList-container-item" v-for="item,index in list" :key="index">
          <img :src="item.avatar" alt="">
          <div class="content">
              <div class="content-title">
                  <div class="title">{{item.nickname}}</div>
                  <div class="time">{{formatDate(item.createDate)}}</div>
              </div>
              <div class="description">{{item.content}}</div>
          </div>
      </div>
      <div class="test" v-loading="isLoading"></div>
  </div>
</template>

<script>

import { formatDate } from "../../../utils/formatDate"
export default {
    created(){
        
    },
    props:{
        // 列表数据
        list:{
            type:Array,
            default:() => [],
        },
    },
    data(){
        return {
            isLoading:false
        }
    },
    methods:{
        formatDate,
        
    }
}
</script>

<style scoped lang="less">
.test{
    position:absolute;
    bottom:0px;
    height:60px;
}
.dataList-container{
    position:relative;
    width:100%;
    font-size:12px;
    margin:20px 0;
    .dataList-container-item{
        width:100%;
        display:flex;
        justify-content: flex-start;
        align-items: flex-start;
        box-sizing: border-box;
        margin:10px 0;
        .content{
            width:100%
        }
        .content-title{
            display:flex;
            justify-content: space-between;
            align-items:flex-start;
            width:100%;
            .time{
                color:#999;
            }
        }
        img{
            flex:0 0 auto;
            width:50px;
            height:50px;
            border-radius:50%;
            margin-right:10px;
        }
        .title{
            color:yellowgreen;
            margin-bottom:10px;
        }
    }
}
</style>